<template>
  <div class="pim">
    <h1>个人信息</h1>
    <div class="basic_info">
      <div class="head_portrait">
        <img :src="origin + userInfo.avatar_url" alt="" />
        <div>
          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            style="width: 80px"
            action="/api/user/avatar"
            :headers="{TOKEN:token}"
            name="avatar"
          >
            <p style="color: #169cd5; text-align: center">点击修改头像</p>
            <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" /> -->
          </el-upload>
        </div>
      </div>

      <ul class="info">
        <li style="font-size: 30px">
          {{ userInfo.username }}
          <i
            class="icon-nv iconfont"
            style="color: #ed5564; font-size: 20px"
            v-if="userInfo.gender == 1"
          ></i>
          <i
            class="icon-nan iconfont"
            style="color: #3ab1db; font-size: 20px"
            v-else-if="userInfo.gender == 0"
          ></i>
        </li>
        <li style="color: #8c8c8c">姓名：{{ userInfo.nickname }}</li>
        <li
          style="color: #8c8c8c; font-size: 14px; margin-top: -10px"
        >
          身份：{{ postList[userInfo.post_id] }}
        </li>
      </ul>
    </div>
    <el-divider></el-divider>
    <el-descriptions title="用户信息" border>
      <el-descriptions-item label="生日">
        <el-tag size="small">{{
        userInfo.birth? userInfo.birth:'暂无'
      }}</el-tag></el-descriptions-item>
      <el-descriptions-item label="手机号">{{
        userInfo.phone_number?userInfo.phone_number:'暂无'
      }}</el-descriptions-item>
      <el-descriptions-item label="居住地">{{
        userInfo.address?userInfo.address:'暂无'
      }}</el-descriptions-item>
      <el-descriptions-item label="身份证号">
        <el-tag size="small">{{ userInfo.id_card?userInfo.id_card:'暂无' }}</el-tag>
      </el-descriptions-item>
      <!-- <el-descriptions-item label="联系地址"
        >江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item
      > -->
    </el-descriptions>
    <el-button type="primary" @click="infoDialogVisible = true"
      >修改基本信息</el-button
    >
    <el-button type="primary" @click="dialogVisible = true">修改密码</el-button>

    <el-dialog title="修改密码" :visible.sync="dialogVisible" width="40%" center>
      <el-form label-width="100px" :model="pwdForm">
        <el-form-item label="旧密码" required>
          <el-input v-model="pwdForm.old_password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密码" required>
          <el-input v-model="pwdForm.new_password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" required>
          <el-input
            v-model="pwdForm.sure_new_password"
            type="password"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" el-button
          >取 消</el-button
        >
        <el-button type="primary" @click="updatePwd">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="修改基本信息"
      :visible.sync="infoDialogVisible"
      width="40%"
      center
      
    >
      <el-form label-width="80px" :model="infoForm">
        <el-form-item label="姓名" required>
          <el-input v-model="infoForm.nickname"></el-input>
        </el-form-item>
        <el-form-item label="性别" required>
          <el-radio v-model="infoForm.gender" :label="0">男</el-radio>
          <el-radio v-model="infoForm.gender" :label="1">女</el-radio>
        </el-form-item>
        <el-form-item label="出生日期" required>
          <el-date-picker
            v-model="infoForm.birth"
            type="date"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="地址" required>
          <el-input v-model="infoForm.address"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" required>
          <el-input v-model="infoForm.phone_number"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" required>
          <el-input v-model="infoForm.id_card"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="infoDialogVisible = false" el-button type="primary"
          >取 消</el-button
        >
        <el-button type="primary" @click="updateUserInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getUserInfo, editUserInfo, editPwd,editAvatar } from "@/api/common";
import {
  getStaffList,
  getStaffDetail,
  editStaff,
  delStaff,
  batchDelStaff,
  createStaff,
  getPostType,
} from "@/api/user";
import dayjs from "dayjs";
export default {
  data() {
    return {
      token:window.localStorage.getItem('token'),
      dialogVisible: false,
      infoDialogVisible: false,
      username: window.sessionStorage.getItem("username")?.replace(/["]/g, ""),
      input: {
        id: "",
        post: "",
        newpassword: "",
        oldpassword: "",
        userPhone: "",
      },
      imageUrl: "",
      userInfo: {
        nickname: "",
        address: "",
        avatar_url: "",
        birth: "",
        gender: "",
        id: "",
        id_card: "",
        phone_number: "",
        post_id: "",
        username: "",
      },
      pwdForm: {
        old_password: "",
        new_password: "",
        sure_new_password: "",
      },
      infoForm: {
        nickname: "",
        address: "",
        avatar_url: "",
        birth: "",
        gender: "",
        id_card: "",
        phone_number: "",
        post_id: "",
        username: "",
      },
      postList:{},
      // origin: "https://api.iwsyt.com:8000/",
      origin:'http://127.0.0.1:8000/',
      file: "",
      headers: {
        "Access-Control-Allow-Origin": "*",
      },
    };
  },
  methods: {
    async getUserInfo() {
      getUserInfo().then((res) => {
        localStorage.setItem('user_info',JSON.stringify(res))
        window.location.reload()
      });
    },
    handleChange() {
      console.log("file", this.file);
    },
    updateUserInfo() {
      let params = this.infoForm;
      if(this.infoForm.birth){
        params={
        ...this.infoForm,
        birth: dayjs(this.infoForm.birth).format("YYYY-MM-DD"),
      }
      }
      editUserInfo(params).then((res) => {
        this.infoDialogVisible = false;
        this.$message.success("修改成功！");
        this.getUserInfo();

        
      });
    },
    updatePwd() {
      if (this.pwdForm.old_password === this.pwdForm.new_password) {
        editPwd(this.pwdForm).then((res) => {
          this.$message.success("修改成功！");
          this.dialogVisible = false;
        });
      } else {
        this.$message.error("两次输入密码不一致！");
      }
    },

    //点击修改头像
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);

      let params = {
        ...this.infoForm,
        avatar_url:res.data.avatar_url
      };
      if(this.infoForm.birth){
        params={
        ...params,
        birth: dayjs(this.infoForm.birth).format("YYYY-MM-DD"),
      }
      }
      editUserInfo(params).then((res) => {
        this.infoDialogVisible = false;
        this.$message.success("修改成功！");
        this.getUserInfo();
      });

    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 20;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 20MB!");
      }
      return isLt2M;
    },
  },
  created() {
    // this.getUserInfo();
    const user_info = JSON.parse(window.localStorage.getItem('user_info'));
    this.userInfo = user_info;
    this.infoForm = user_info;
    delete this.infoForm.id;
    getPostType().then((res) => {
      this.postList = res;
    });
  },
};
</script>

<style lang="less" scoped>
.pim {
  margin: 0 50px;
}
h1 {
  font-size: 24px;
  font-weight: 400;
  padding-bottom: 10px;
  color: #565758;
  margin-bottom: 20px;
}
.basic_info {
  display: flex;
  margin: 40px 100px;
  img {
    width: 80px;
    height: 80px;
    border-radius: 40px;
  }
  .info {
    margin-left: 30px;
    li {
      list-style: none;
      margin-bottom: 15px;
      font-size: 18px;
    }
  }
}
h3 {
  margin: 30px 0 10px 0;
}
.el-input {
  margin-right: 20px;
  width: 380px;
}
.el-button--primary {
  background: #4064e1;
  margin-top: 27px;
}
</style>
